import Taro, { Component } from '@tarojs/taro'
import {View, ScrollView, Text, Button, Image, OpenData} from '@tarojs/components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/user'
import { dispatchItemRecommend } from '@actions/item'
import { getWindowHeight } from '@utils/style'
import jump from '@utils/jump'
import { IconFont, ItemFlow, ButtonItem } from '@components'
import bg from "@assets/bg.png"
import './user.scss'

const ORDER_LIST = [
  {
    type: 1,
    name: '待付款',
    img: 'order_pay'
  },
  {
    type: 2,
    name: '待发货',
    img: 'order_send'
  },
  {
    type: 3,
    name: '待收货',
    img: 'order_receive'
  },
  {
    type: 4,
    name: '已完成',
    img: 'order_all'
  },
  {
    type: 5,
    name: '退换/售后',
    img: 'order_back'
  }
]

const MENU_LIST = [
  {
    key: 'coupon',
    name: '优惠券',
    url: '/pages/coupon/coupon',
    login: true,
    img: 'coupon'
  },
  {
    key: 'phone',
    name: '联系电话',
    url: '',
    login: false,
    img: 'phone'
  },
  {
    key: 'address',
    name: '地址管理',
    url: '/pages/address/address',
    login: true,
    img: 'location'
  },
  {
    key: 'service',
    name: '在线客服',
    url: '',
    login: false,
    img: 'message'
  }
]

@connect(state => state.user, { ...actions, dispatchItemRecommend })
class User extends Component {
  config = {
    navigationBarTitleText: '个人中心'
  }

  constructor(props) {
    super(props)
    this.state = {
      userInfo: {},
      recommendList: [],
      login: false
    }
  }

  componentDidMount() {
    this.loadUserInfo()
    this.props.dispatchItemRecommend().then(data => {
      this.setState({recommendList: data.itemList})
    })
  }

  componentDidShow() {
    this.loadUserInfo()
  }

  loadUserInfo() {
    if(Taro.getStorageSync('token')) {
      // 获取微信用户信息
      this.props.dispatchUser().then((data) => {
        this.setState({
          userInfo: data,
          login: true
        })
      })
    } else {
      this.setState({login: false})
    }
  }

  formatPhone(phone) {
    var pho=/(\d{3})\d*(\d{4})/
    return phone.replace(pho,'$1****$2')
  }

  handleLogin = () => {
    jump({
      url: '/pages/userLogin/userLogin'
    })
  }

  handleOrder = (type) => {
    if (type == 5) {
      jump({
        url: '/pages/afterSaleList/afterSaleList',
        login: true
      })
    } else {
      jump({
        url: '/pages/orderList/orderList',
        payload: {
          type: type
        },
        login: true
      })
    }
  }

  handleMenu = (menu) => {
    if (menu.key === 'phone') {
      Taro.makePhoneCall({
        phoneNumber: '17620373226'
      })
    } else {
      jump({
        url: menu.url,
        title: menu.name,
        login: menu.login
      })
    }
  }

  render () {
    const { userInfo, login, recommendList} = this.state
    const BUTTON = {
      width: Taro.pxTransform(120),
      height: Taro.pxTransform(56),
      borderRadius: Taro.pxTransform(30),
      marginTop: Taro.pxTransform(20)
    }

    return (
      <View className='user'>
        <ScrollView
          scrollY
          className='user__wrap'
          style={{ height: getWindowHeight() }}
        >
          <View className='user-header'>
            {/* // NOTE 背景图片：Image 标签 + position absolute 实现 */}
            <Image className='user-header-bg' src={bg} mode='widthFix' />
            <View className='user-info'>
              <OpenData className='user-info-avatar' type='userAvatarUrl' />
              <View className='user-info-r'>
                <OpenData className='user-info-name' type='userNickName' />
                {login
                  ?
                  <Text className='user-info-tel' >{this.formatPhone(userInfo.phone)}</Text>
                  :
                  <ButtonItem
                    type='primary'
                    text='登录'
                    compStyle={BUTTON}
                    onClick={this.handleLogin}
                  />
                }
              </View>
            </View>
          </View>

          <View className='order-center'>
            <View className='order-center__header'>
              <Text className='order-center__header-title'>我的订单</Text>
              <View className='order-center__header-info' onClick={this.handleOrder.bind(this, 0)}>
                查看全部
                <IconFont size={20} name='more' />
              </View>
            </View>
            <View className='order-center__grid'>
              {ORDER_LIST.map((item) => {
                return (
                  <View key={item.type} className='order-center__item' onClick={this.handleOrder.bind(this, item.type)}>
                    <IconFont size={52} name={item.img} />
                    <Text className='order-center__item-txt'>{item.name}</Text>
                  </View>
                )
              })}
            </View>
          </View>

          <View className='user-menu'>
            {MENU_LIST.map((item, index) => {
              const isService = item.key === 'service'
              return (
                <View key={index}>
                  {
                    isService ?
                      <Button  openType='contact' className='user-menu__btn'>
                        <View className='user-menu__item-left'>
                          <IconFont size={40} name={item.img} />
                          <Text className='user-menu__item-txt'>{item.name}</Text>
                        </View>
                        <IconFont size={25} name='more' />
                      </Button>
                      :
                      <View className='user-menu__item' onClick={this.handleMenu.bind(this, item)} >
                        <View className='user-menu__item-left'>
                          <IconFont size={40} name={item.img} />
                          <Text className='user-menu__item-txt'>{item.name}</Text>
                        </View>
                        <IconFont size={25} name='more' />
                      </View>
                  }
                </View>
              )
            })}
          </View>

          {/* 猜你喜欢 */}
          {
            recommendList &&
            <View>
              <View className='user__recommend'>
                <Text className='user__recommend-txt'>猜你喜欢</Text>
              </View>
              <ItemFlow list={recommendList} showTitle='true' >
              </ItemFlow>
            </View>
          }

        </ScrollView>

      </View>
    )
  }
}

export default User
